<template>
  <div style="color: red">DOM树的加载过程</div>
  <br />
  <p>1.解析HTML文档：从上到下读取和解析HTML文档代码</p>
  <p>
    2.构建DOM树:它表示了HTML文档的结构,每一个元素会被代表一个节点，最后构建成一个DOM树，根是document
  </p>
  <p>3.构造CSS树：当解析器遇到link或者style元素时，就会开始解析和计算CSS样式</p>
  <p>4.渲染树：DOM树+CSS树合并而成</p>
  <p>5.布局：在渲染树的基础上，浏览器会计算每一个元素精确的位置和大小</p>
  <p>6.绘制：根据布局的结果，浏览器会绘制每一个元素，生成图像</p>
  <p>7.最后浏览器将所有进行一个结合，生成最终的页面渲染效果</p>
</template>

<script setup lang="ts" name="DomTree"></script>

<style scoped lang="scss"></style>
